import { useParent } from "../common/relation";
import { VantComponent } from "../common/component";
function emit(target, value) {
	target.$emit("input", value);
	target.$emit("change", value);
}
VantComponent({
	field: true,
	relation: useParent("checkbox-group"),
	classes: ["icon-class", "label-class"],
	props: {
		value: Boolean,
		disabled: Boolean,
		useIconSlot: Boolean,
		checkedColor: String,
		labelPosition: {
			type: String,
			value: "right"
		},
		labelDisabled: Boolean,
		shape: {
			type: String,
			value: "round"
		},
		iconSize: {
			type: null,
			value: 20
		}
	},
	data: {
		parentDisabled: false,
		direction: "vertical"
	},
	methods: {
		emitChange(value) {
			if (this.parent) {
				this.setParentValue(this.parent, value);
			} else {
				emit(this, value);
			}
		},
		toggle() {
			const { parentDisabled, disabled, value } = this.data;
			if (!disabled && !parentDisabled) {
				this.emitChange(!value);
			}
		},
		onClickLabel() {
			const { labelDisabled, parentDisabled, disabled, value } = this.data;
			if (!disabled && !labelDisabled && !parentDisabled) {
				this.emitChange(!value);
			}
		},
		setParentValue(parent, value) {
			const parentValue = parent.data.value.slice();
			const { name } = this.data;
			const { max } = parent.data;
			if (value) {
				if (max && parentValue.length >= max) {
					return;
				}
				if (parentValue.indexOf(name) === -1) {
					parentValue.push(name);
					emit(parent, parentValue);
				}
			} else {
				const index = parentValue.indexOf(name);
				if (index !== -1) {
					parentValue.splice(index, 1);
					emit(parent, parentValue);
				}
			}
		}
	}
});
